<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<!--导入模态框-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-import-plan">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>模版</label>
                        <a class="out" th:href="@{/file/制作件计划模板.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input id="import-file" class="btn" type="file" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-import" type="button" class="btn btn-success">
                    <span class="Bold">确定</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--上传附件-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">上传附件</h4>
            </div>
            <div class="modal-body">
                <form id="uploadForm">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label>选择附件上传</label>
                        <input class="btn" type="file" name="file">
                        <p class="help-block">多个文件请自行打包上传，大小不要超过100M</p>
                        <p class="help-block text-red">多条计划附件不支持上传同名文件</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button shiro:hasPermission="production:list:cha" id="btn-upload" type="button"
                        class="btn btn-success">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <a th:href="@{/production/list}"
           class="btn btn-default pull-right" style="margin-right: 10px">
            <span class="Bold">取消</span>
        </a>
        <a id="btn-save" shiro:hasPermission="production:list:cha" href="javascript:void(0);"
           class="btn btn-success pull-right" style="margin-right: 10px">
            <span class="Bold">保存</span>
        </a>
    </div>
    <div class="row">
        <form id="sheetForm" class="form-horizontal">
            <div class="col-xs-11 col-xs-offset-1">
                    <input type="hidden" name="id" th:value="${makeSheet.id}">
                    <table class="t1 t3">
                        <thead>
                        <tr>
                            <td colspan="14">
                                <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                                <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                    <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                    <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="14" style="font-size: 16px;letter-spacing: 4px;">
                                制作件清单变更单
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="3" style="width: 8%">项目编号</td>
                            <td style="width: 11%;font-size: 14px;">
                                <input id="sheetForm-proCode" type="text" class="form-control" name="proCode"
                                       th:value="${makeSheet.proCode}" readonly>
                            </td>
                            <td style="width: 8%">项目名称</td>
                            <td colspan="3" style="width: 21%">
                                <input id="sheetForm-proName" type="text" class="form-control" name="proName"
                                       th:value="${makeSheet.proName}" readonly>
                            </td>
                            <td style="width: 8%">项目数量</td>
                            <td style="width: 6%">
                                <input id="sheetForm-proNum" type="number" class="form-control" name="proNum"
                                       th:value="${makeSheet.proNum}" readonly>
                            </td>
                            <td style="width: 6%">类型</td>
                            <td style="width: 9%">
                                <input id="sheetForm-malType" type="text" class="form-control" name="special"
                                       th:value="${makeSheet.special}" readonly>
                                <input type="hidden" th:value="${makeSheet.specialId}" name="specialId">
                            </td>
                            <td style="width: 6%">部分</td>
                            <td style="width: 9%">
                                <input id="sheetForm-part" type="text" class="form-control error" name="part"
                                       th:value="${makeSheet.part}" readonly>
                                <input type="hidden" th:value="${makeSheet.partId}" name="partId">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td style="width: 4%">序号</td>
                            <td colspan="3">图号</td>
                            <td colspan="3">图名</td>
                            <td style="width: 6%">数量</td>
                            <td colspan="2">制作件类型</td>
                            <td colspan="2">备注</td>
                            <td>变更原因</td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody id="out">
                        <tr th:each="plan : ${makePlans}" trType="sourceTR" th:teId="${plan.id}">
                            <td id="beforRow" th:if="${planStat.index == 0}" th:rowspan="${planStat.size}">更改前</td>
                            <td th:text="${planStat.count}" beforeTdOrdernum="beforeTdOrdernum"></td>
                            <td colspan="3" th:text="${makeSheet.sheetType == 1 ? plan.drawNo : plan.afterDrawNo}"></td>
                            <td colspan="3"th:text="${makeSheet.sheetType == 1 ? plan.drawName : plan.afterDrawName}"></td>
                            <td th:text="${makeSheet.sheetType == 1 ? plan.drawNum : plan.afterDrawNum}"></td>
                            <td colspan="2"th:text="${makeSheet.sheetType == 1 ? plan.makeType : plan.afterMakeType}"></td>
                            <td colspan="2" th:text="${makeSheet.sheetType == 1 ? plan.remark : plan.afterRemark}"></td>
                            <td></td>
                            <td>
<!--                                <a target="_blank" title="下载附件" th:if="${(makeSheet.sheetType == 1 && plan.url != null) || (makeSheet.sheetType == 2 && plan.afterUrl != null)}"-->
<!--                                   th:href="${makeSheet.sheetType == 1 ? plan.url : plan.afterUrl}"><i class="fa fa-download text-primary"></i> </a>-->
                            </td>

                        </tr>
                        <tr th:each="plan : ${makePlans}" th:class="${planStat.index == 0 ? 'after-tr' : ''}"  trType="cloneTR" th:teId="${plan.id}" th:orderNumId="${makeSheet.sheetType == 1 ?plan.resultOrderNum:plan.resultOrderNum}">
                            <!--th:rowspan="${planStat.size}"-->
                            <td id="afertRow" th:if="${planStat.index == 0}" th:rowspan="${planStat.size}">更改后</td>
                            <input type="hidden" id="tableOrderNum" th:if="${planStat.index == 0}" th:value="${planStat.size}">
                            <td th:text="${planStat.count}"  afterTdOrdernum="afterTdOrdernum"></td>
                            <td colspan="3">
                                <input type="hidden" name="planId" th:value="${plan.id}">
                                <input type="hidden" name="orderNum" th:value="${makeSheet.sheetType == 1? plan.orderNum : plan.resultOrderNum}">
                                <input type="text" class="form-control" name="afterDrawNo" th:value="${makeSheet.sheetType == 1 ? plan.drawNo : plan.afterDrawNo}" autocomplete="off">
                            </td>
                            <td colspan="3">
                                <input type="hidden" name="technologyChange" value="-2">
                                <input type="text" class="form-control" name="afterDrawName" th:value="${makeSheet.sheetType == 1 ? plan.drawName : plan.afterDrawName}" autocomplete="off">
                            </td>
                            <td>
                                <input type="number" step="0.1" class="form-control" name="afterDrawNum" th:value="${makeSheet.sheetType == 1 ? plan.drawNum : plan.afterDrawNum}" autocomplete="off">
                            </td>
                            <td colspan="2">
                                <input type="text" class="form-control" name="afterMakeType" th:value="${makeSheet.sheetType == 1 ? plan.makeType : plan.afterMakeType}" autocomplete="off">
                            </td>
                            <td colspan="2">
                                <input type="hidden" name="afterUrl">

                                <input type="text" class="form-control" name="afterRemark" th:value="${makeSheet.sheetType == 1 ? plan.remark : plan.afterRemark}" autocomplete="off">
                            </td>
                            <td>
                                <select class="form-control" name="changeReason">
                                    <option value="">请选择</option>
                                    <option th:each="r : ${reasons}" th:value="${r.name}"
                                            th:text="${r.name}"></option>
                                    <input type="hidden" id="reasonId" th:value="${reasons}">
                                </select>
                            </td>
                            <td>
                                <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                                <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
<!--                                <span class="out-upload" title="上传附件"><i class="fa fa-upload text-success"></i> </span>-->
                            </td>
                        </tr>
                        </tbody>
                    </table>
            </div>
            <div class="col-xs-10 col-xs-offset-1" style="font-size: 14px;line-height: 200%;">
                <div class="col-xs-3" style="padding-left: 0">提报人： [[${session.user.name}]]</div>
                <div class="col-xs-3 bottom form-inline">联系电话：
                    <input class="form-control" style="width:60%;border: none;border-bottom: 1px solid #000;" type="text" name="postTel" th:value="${makeSheet.postTel}">
                </div>
            </div>
        </form>
    </div>
    <!--<div th:include="include :: tip"></div>-->
</section>
<div th:include="include :: footer"></div>
<script th:src="@{/plugin/SheetJs/xlsx.core.min.js}"></script>
<script th:inline="javascript">
    let tempUrl,trAutoIndex=9999,dynamicId=0,orderNum;

    /** 计算表格序号 */
    // function computerNo() {
    //     $("table tbody tr").each(function (i, e) {
    //         $(this).children("td:first").text(i + 1);
    //     });
    // }


    /** tr表格变更后的序号的计算*/
    function beforeCompuTrNo(){
        $("table tbody tr[trtype='sourceTR']").each(function(i,e){
            $(this).children("td[beforeTdOrdernum='beforeTdOrdernum']").text(i+1);
        })
    }
    /** tr表格变更前的序号的计算*/
    function afterCompuTrNo(){
        $("table tbody tr[trtype='cloneTR']").each(function(i,e){
            $(this).children("td[afterTdOrdernum='afterTdOrdernum']").text(i+1);
        })
    }


    /** 增加计算table表格第一列合并单元格的数值*/
    function rowspanesAdd(){
        let beforNum = parseInt($("#beforRow").attr("rowspan"));
        let afterNum = parseInt($("#afertRow").attr("rowspan"));
        beforNum+=1;
        afterNum+=1;
        $("#afertRow").attr("rowspan",afterNum);
        $("#beforRow").attr("rowspan",beforNum);
    }

    /** 删除计算table表格第一列合并单元格的数值*/
    function rowspanesReduce(){
        let beforNum = parseInt($("#beforRow").attr("rowspan"));
        let afterNum = parseInt($("#afertRow").attr("rowspan"));
        beforNum-=1;
        afterNum-=1;
        $("#afertRow").attr("rowspan",afterNum);
        $("#beforRow").attr("rowspan",beforNum);

    }

    /** 动态获取变更原因*/
    function dynamicAcquisition(){
        js.post({
            url: ctx + "production/list/list/reason",
            data: {},
            success: function (result) {
                if (result.length>0) {
                    sessionStorage.setItem("reasonList",JSON.stringify(result));
                } else {
                    js.modal.warning(result.msg);
                }
            }
        })
    }

    /** 在固定的td里面填充select*/
    function additional(){
        var reasonArry =  JSON.parse(sessionStorage.getItem("reasonList"));
        $("#reason"+dynamicId).append(`<option value="">请选择</option>`);
        reasonArry.forEach(value => {
            if (value) {
                $("#reason"+dynamicId).append(`<option value="${value.name}">${value.name}</option>`);
            }
        })

    }

    $(function () {

        /** 动态获取变更原因*/
        dynamicAcquisition();

        /** 添加一行 */
        $("#sheetForm").on('click', '.out-add', function () {
            /** 动态添加《td》的记录数*/
            trAutoIndex++;
            /** 动态添加下拉列表的记录数*/
            dynamicId++;
            /** 添加没行数据时获得当前行数下的orderNum*/
            orderNum = $(this).parents("tr").attr("orderNumId")
            var indexTr=$(this).parents("tr").attr("teid");
           $("#sheetForm tr[trtype='sourceTR'][teid='"+indexTr+"']").after(`
              <tr trtype='sourceTR' teid='`+trAutoIndex+`'>
                <td beforeTdOrdernum="beforeTdOrdernum"></td>
                <td colspan="3">
                    <input type="text" class="form-control" name="drawNo" autocomplete="off" readonly="readonly">
                </td>
                 <td colspan="3">
                    <input type="text" class="form-control" name="drawName" autocomplete="off" readonly="readonly">
                </td>
                <td>
                    <input type="number" step="0.1" class="form-control" name="drawNum" autocomplete="off" readonly="readonly">
                </td>
                <td colspan="2">
                    <input type="text" class="form-control" name="makeType" autocomplete="off" readonly="readonly">
                </td>
                <td colspan="2">
                    <input type="text" class="form-control" name="remark" autocomplete="off" readonly="readonly">
                </td>
                <td>
                 <input type="text" class="form-control" name="remark" autocomplete="off" readonly="readonly">
                </td>
                <td>

                </td>
            </tr>
                `);
            beforeCompuTrNo();

            $(this).parents("tr").after(`
                    <tr trtype='cloneTR' teid='`+trAutoIndex+`' orderNumId='`+orderNum+`'>
                        <td afterTdOrdernum="afterTdOrdernum"></td>
                        <input type="hidden" name="planId" value="0">
                        <input type="hidden" name="afterUrl">
                        <td colspan="3">
                            <input type="text" class="form-control" name="afterDrawNo" autocomplete="off" >
                        </td>
                         <td colspan="3">
                            <input type="text" class="form-control" name="afterDrawName" autocomplete="off">
                             <input type="hidden" name="orderNum" value='`+orderNum+`'>
                        </td>
                        <td>
                            <input type="number" step="0.1" class="form-control" name="afterDrawNum" autocomplete="off">
                        </td>
                        <td colspan="2">
                            <input type="hidden" name="technologyChange" value="-2">
                            <input type="text" class="form-control" name="afterMakeType" autocomplete="off">
                        </td>
                        <td colspan="2">
                            <input type="text" class="form-control" name="afterRemark" autocomplete="off"  >
                        </td>
                        <td>
                            <select class="form-control" class="reasonArr" id="reason`+dynamicId+`" name="changeReason">
                            </select>
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
<!--                            <span class="out-upload" title="上传附件"><i class="fa fa-upload text-success"></i> </span>-->
                        </td>
                    </tr>
            `);
            afterCompuTrNo();
            rowspanesAdd();
            additional();
        });


        /** 删除行 */
        $('#sheetForm').on('click', '.out-del', function () {
            let $this = $(this);
            ;
            let id = $(this).parents("tr").find("input[name=planId]").val();
            var aa=$(this).parents("tr").attr("teid");
            if (id!=0) {
                    /** 删除时的状态2为变更删除*/
                    $this.parents("tr").find("input[name=technologyChange]").attr("value",2);
                    $this.parents("tr").find("input[name=afterDrawNo]").attr({"readonly":true,"style":"color:red"});
                    $this.parents("tr").find("input[name=afterDrawName]").attr({"readonly":true,"style":"color:red"});
                    $this.parents("tr").find("input[name=afterDrawNum]").attr({"readonly":true,"style":"color:red"});
                    $this.parents("tr").find("input[name=afterMakeType]").attr({"readonly":true,"style":"color:red"});
                    $this.parents("tr").find("input[name=afterRemark]").attr({"readonly":true,"style":"color:red"});
                    afterCompuTrNo();
            } else {
                $this.parents("tr").remove();
                $("#sheetForm tr[trtype='sourceTR'][teid='"+aa+"']").remove();
                beforeCompuTrNo();
                afterCompuTrNo();
                rowspanesReduce();
            }

        });


        $("#sheetForm").on('click', '.out-upload', function () {
            tempUrl = $(this).parents("tr").find("input[name=afterUrl]");
            js.modal.open('modal-upload');
        });
        /** 初始化验证 */
        js.validate.init("uploadForm", {
            fields: {
                file: {
                    validators: {
                        notEmpty: {message: '上传文件不能为空'}
                    }
                }
            }
        });
        /** 上传附件 */
        $("#btn-upload").click(function () {
            var $this = $(this);
            $this.attr('disabled', true);
            js.validSubmit({
                formId: "uploadForm",
                url: ctx + "report/list/out/change/save/upload",
                data: new FormData($("#uploadForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.alert(result.msg);
                        tempUrl.val(result.data);
                        js.modal.hide("modal-upload");
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
            $this.attr('disabled', false);
        });
        /** 重置表单及验证 */
        js.modal.hideEvent("modal-upload", function () {
            js.validate.reset("uploadForm");
            js.reset("uploadForm");
        });

        /** 保存计划单 */
        $("#btn-save").click(function () {
            let $this = $(this);
            let res = js.vd({
                id: 'sheetForm',
                notEmpty: ['proCode', 'afterDrawNo', 'afterDrawName', 'afterDrawNum','afterMakeType', 'changeReason', 'postTel']
            })
            if (!res) {
                return;
            }
            $this.attr('disabled', true);
            js.submit({
                formId: "sheetForm",
                url: ctx + 'production/list/make/change/save',
                data: new FormData($("#sheetForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        location.href = ctx + "production/list";
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
            $this.removeAttr('disabled');
        });

    });
</script>
</body>
</html>
